<template lang="">
    <div>
        <div v-for='(i,index) in list'>
                <van-field v-for='j in i' :key='j.id' :label='j.label' v-model='values[index+j.key]'/>
        </div>
        <van-button @click='add'>+</van-button>
        <van-button @click='submit'>提交</van-button>

    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[[
                {'label':'名称','key':'name'},
                {'label':'类型','key':'type'},
                {'label':'字段名','key':'field'},
                {'label':'checkbox,radio,select值','key':'fvalue'}
                ]],
            id:this.$route.query.id,
            values:{},
            number:1
        }
    },
    methods: {
        //点击+号
        add(){
            this.number+=1
            this.list.push([
                {'label':'名称','key':'name'},
                {'label':'类型','key':'type'},
                {'label':'字段名','key':'field'},
                {'label':'checkbox,radio,select值','key':'fvalue'}
                ])
        },
        //提交表单
        submit(){
           var list=[]
           for(var i=0;i<this.number;i++){
               var name=i+'name'
               var type=i+'type'
               var field=i+'field'
               var fvalue=i+'fvalue'
               var dict={'name':this.values[name],'type':this.values[type],'field':this.values[field],'fvalue':this.values[fvalue]}
               list.push(dict)
           }
         
           //更新数据库操作
           this.$axios.post('setparams',{'id':this.id,'params':JSON.stringify(list)}).then(res=>{

           })
        }
    },
}
</script>
<style lang="">

</style>